<template>
   <div class="my_div">
     <img :src='imgs' alt="">   
     <P :style="{backgroundColor:color}" @click="add">{{dogName}}</P>   
   </div>
</template>

<script>
export default {
  data(){
     return{
       color:''
     }
  },
   methods:{
    add(){
     this.$emit('add',this.dogName) 
     let r = Math.floor(Math.random() * 256)
     let g = Math.floor(Math.random() * 256)
     let b = Math.floor(Math.random() * 256)
     let a = Math.floor(Math.random() * 256)
     this.color = `rgba(${r},${g},${b}.${a})`
    }
   },
   props:['imgs','dogName']

}
</script>

<style>
.my_div {
  width: 400px;
  border: 1px solid black;
  text-align: center;
  float: left;  
}

.my_div img {
  width: 100%;
}
</style>